use std::ops::Deref;
use std::time::Duration;
use gloo::timers::callback::Timeout;
use web_sys::InputEvent;
use yew::{function_component, html, use_context, use_mut_ref, use_state, Callback, Html, Properties};
use yewdux::use_store;
use crate::db::pojo::pojo::{ImGroup, ImUser};
use crate::business::app_state::AppState;
use crate::business::page::fragment::nav::NavLinkIndicator;
use crate::business::page::fragment::user_and_group_list_view::UserAndGroupListView;
use crate::business::page::fragment::user_icon::UserIcon;
use crate::business::util::input::get_value_from_input_event;

#[function_component(UserGroupPage)]
pub fn user_page() -> Html {
    let app_state = use_context::<AppState>().unwrap();

    let search_state = use_state(|| String::new());
    let search_state_clone = search_state.clone();
    let search_callback = Callback::from(move |search: String| {
        log::info!("search value: {}", search);
        search_state_clone.set(search);
    });

    let (_, dispatch) = use_store::<NavLinkIndicator>();
    dispatch.reduce_mut(|store| store.value = "_User_");

    html! {
        <div class="user-group-page">
            <div>
                <button class="user-btn"> { "用户" }</button>
                <button class="group-btn"> { "群组" }</button>
            </div>
            <UserSearchView {search_callback}/>

            <UserAndGroupListView/>
        </div>
    }
}

#[derive(Properties, Clone, PartialEq)]
struct UserSearchProps {
    pub(crate) search_callback: Callback<String>,
}

#[function_component(UserSearchView)]
fn user_search_view(props: &UserSearchProps) -> Html {
    let UserSearchProps { search_callback } = props.clone();

    let search_content_ref = use_mut_ref(|| String::new());

    let search_content_ref_clone = search_content_ref.clone();
    let search_callback_clone = search_callback.clone();
    let text_input_callback = Callback::from(move |input_event: InputEvent| {
        let search = get_value_from_input_event(input_event);
        *search_content_ref_clone.borrow_mut() = search.clone();

        let tt = search_content_ref_clone.clone();
        let search_callback_clone2 = search_callback_clone.clone();
        log::info!("input search: {}", search);

        let _ = Timeout::new(Duration::from_millis(300).as_millis() as u32, move || {
            let old_search = tt.borrow().deref().clone();
            let search_clone = search.clone();
            log::info!("input search22: {}, {}", old_search, search_clone);
            if old_search == search_clone {
                search_callback_clone2.emit(search_clone);
            }
        }).forget();
    });
    html! {
        <div class="user-search-view">
            <input type="text" oninput={text_input_callback} style="min-width: 130px" />
            <img src="/imgs/search.png" width="20" height="20"/>
        </div>
    }
}

impl ImUser {

    pub fn render(&self, select_user_callback: Callback<ImUser>) -> Html {
        let user_clone = self.clone();
        let selected_session_callback = select_user_callback.reform(move |_| user_clone.clone());
        html! {
            <li>
                <div class="im-user-item" onclick = {selected_session_callback}>
                    <icon><UserIcon/></icon>

                </div>
            </li>
        }
    }

}

#[derive(Debug, Default, Clone)]
struct UserSearchData {
    search: Option<String>,
}

struct ImUserAndGroup {
    user: Option<ImUser>,
    group: Option<ImGroup>,
}